<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="../../element-ui-2.13.0/lib/theme-chalk/index.css" />
    <script type="text/javascript" src="../../vue/vue-v2.6.10.js"></script>
    <script type="text/javascript" src="../../element-ui-2.13.0/lib/index.js"></script>
    <script type="text/javascript" src="../../vue/axios-0.18.0.js"></script>
</head>

<body>
    <div id="app">
        <el-tag type="info" effect="dark" v-if="inputVisible" closable="true" :disable-transitions="disable"
            @close="handleClose">用户课程管理</el-tag>
        <div v-if="inputVisible">
            <template>
                <!-- tableData.filter(data => !search || data.user.name.toLowerCase().includes(search.toLowerCase())) -->
                <el-table
                    :data="tableData"
                    style="width: 100%" @selection-change="handleSelectionChange">
                    <el-table-column type="selection" width="50" prop="id">
                    </el-table-column>
                    <el-table-column label="序号" type="index" width="100px">
                    </el-table-column>
                    <el-table-column label="课程名称" prop="course.courseName">
                    </el-table-column>
                    <el-table-column label="选课人" prop="user.name">
                    </el-table-column>
                    <el-table-column align="right" width="200px">
                        <template slot="header" slot-scope="scope">
                            <el-input v-model="search" @blur="findAll()" size="mini" placeholder="输入选课人搜索" />
                        </template>
                        <template slot-scope="scope">
                            <el-button size="mini" @click="handleEdit(scope.$index, scope.row)">修改</el-button>
                            <el-button size="mini" type="danger" @click="handleDetail(scope.$index, scope.row)">详情
                            </el-button>
                        </template>
                    </el-table-column>
                </el-table>
            </template>

            <br />
            <el-row>
                <el-button type="warning" @click="delAll()">删除选中</el-button>
            </el-row>

            <!--  分页 -->
            <template>
                <div class="block" align="right">
                    <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange"
                        :current-page="currentPage" :page-sizes="[3, 4, 5, 6]" :page-size="pageSize"
                        layout="total, sizes, prev, pager, next, jumper" :total="total">
                    </el-pagination>
                </div>
            </template>
        </div>

        <!--修改选课-->
        <el-dialog title="修改选课" :visible.sync="dialogFormVisible1">
            <el-form ref="ruleForm" :model="ruleForm" label-width="80px">
                <el-form-item label="课程名称" prop="course.cid">
                    <el-select v-model="ruleForm.course.cid" placeholder="请选择课程">
                        <el-option v-for="item in courseNames" :value="item.cid" :label="item.courseName"></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="选课人">
                    <el-input v-model="ruleForm.user.name" style="width: 210px;" disabled></el-input>
                </el-form-item>
                <el-form-item label="联系方式">
                    <el-input v-model="ruleForm.user.phone" style="width: 210px;" disabled></el-input>
                </el-form-item>
            </el-form>
            <span slot="footer" class="dialog-footer">
                <el-button @click="dialogFormVisible1 = false">取 消</el-button>
                <el-button type="primary" @click="submitForm('ruleForm')">确 定</el-button>
            </span>
        </el-dialog>

        <!--结尾-->
        <!--查看选课-->
        <el-dialog title="选课信息" :visible.sync="dialogFormVisible2">
            <el-form ref="ruleForm" :model="ruleForm" label-width="80px">
                <el-form-item label="课程名称">
                    <el-input v-model="ruleForm.course.courseName" style="width: 210px;"></el-input>
                </el-form-item>
                <el-form-item label="课程类型">
                    <el-input v-if="ruleForm.course.courseType==1" style="width: 210px;" value="Java"></el-input>
                    <el-input v-if="ruleForm.course.courseType==2" style="width: 210px;" value="数据库"></el-input>
                    <el-input v-if="ruleForm.course.courseType==3" style="width: 210px;" value="前端"></el-input>
                </el-form-item>
                <el-form-item label="课程价格">
                    <el-input v-model="ruleForm.course.coursePrice" style="width: 210px;"></el-input>
                </el-form-item>
                <el-form-item label="选课人">
                    <el-input v-model="ruleForm.user.name" style="width: 210px;"></el-input>
                </el-form-item>
                <el-form-item label="联系方式">
                    <el-input v-model="ruleForm.user.phone" style="width: 210px;"></el-input>
                </el-form-item>
            </el-form>
        </el-dialog>
        <!--结尾-->


    </div>

</body>
<script>
    axios.defaults.withCredentials = true
    new Vue({
        el: "#app",
        data: {
            /* 分页参数 */
            tableData: [],
            currentPage: 1,
            total: '',
            pageSize: 3,
            /* 条件查询 */
            search: '',
            //批量删除存放选中的复选框
            multipleSelection: [],
            //批量删除存放的uid
            delarr: [],
            /*选项卡*/
            inputVisible: true,
            disable: false,
            //修改的对话框
            dialogFormVisible1: false,
            //详情的对话框
            dialogFormVisible2: false,
            //表单字段
            ruleForm: {
                id: '',
                course: '',
                user: ''
            },
            courseNames: []
        },
        methods: {

            handleClose() {

            },

            handleEdit(index, row) {
                this.dialogFormVisible1=true;
                this.ruleForm=row;
            },

            handleDetail(index, row) {
                this.dialogFormVisible2=true;
                this.ruleForm=row;
            },

            findAll() {
                this.currentPage = 1;
				this.show(1, this.pageSize);
            },

            handleSizeChange(val) {
                this.pageSize = val;
				this.currentPage = 1;
				this.show(1, val);
            },

            handleCurrentChange(val) {
                this.currentPage = val;
				this.show(val, this.pageSize);
            },

            handleSelectionChange(val) {
                this.delarr = val.map(obj => obj.id);
            },

            delAll() {
                if (this.delarr.length != 0) {
					axios({
						method: "post",
						url: 'http://192.168.194.223:8080/edu/userCourse',
						data: this.delarr,
						params: {
							flag: 'delSelect'
						}
					}).then(res => {
						this.$message.success(res.data);
						this.currentPage=1;
						this.show(1, this.pageSize);
					});
				} else {
					this.$message.error("请选择，您要删除的数据！");
				}
            },

            findAllCourse() {


            },
            submitForm() {
                axios({
                    method: 'get',
                    url: 'http://192.168.194.223:8080/edu/userCourse',
                    params: {
                        flag: 'update',
                        id:this.ruleForm.id,
                        cid:this.ruleForm.course.cid
                    }
                }).then(res => {
                    this.$message.success(res.data);
                    this.dialogFormVisible1=false;
                    this.show(this.currentPage,this.pageSize);
                });
            }, 
            show(page, size) {
                axios({
                    method: 'post',
                    url: 'http://192.168.194.223:8080/edu/userCourse',
                    params: {
                        flag: 'show',
                        currentPage: page,
                        pageSize: size,
                        search: this.search
                    }
                }).then(res => {
                    this.tableData = res.data.result;
					this.total = res.data.countRows;
                });
            },
            getCourseList(){
                axios({
                    method: 'get',
                    url: 'http://192.168.194.223:8080/edu/course',
                    params: {
                        flag: 'allCourse'
                    }
                }).then(res => {
                    this.courseNames=res.data;
                });
            }
        },
        created: function () {
            this.show(1,3);
            this.getCourseList()
        }
    })
</script>

</html>